var WebGIS = function (map) {
    var canvas, ctx

    function getMapExtent() {
        const xmin = this.map.getBounds().getWest()
        const xmax = this.map.getBounds().getEast()
        const ymin = this.map.getBounds().getSouth()
        const ymax = this.map.getBounds().getNorth()
        return [
            [xmin, ymax],
            [xmax, ymax],
            [xmax, ymin],
            [xmin, ymin]
        ];
    }

    /**
     * 地理坐标转换为屏幕坐标
     * @param mapPt
     */
    function map2screen(mapPt) {
        var res = map.project(mapPt)
        return [res.x, res.y]
    }

    function init() {
        // 1、创建一个canvas
        canvas = document.createElement('canvas');
        canvas.setAttribute('id', 'mapCanvas');
        const w = map.getCanvas().width;
        const h = map.getCanvas().height;
        canvas.setAttribute('width', w);
        canvas.setAttribute('height', h);
        map.getCanvasContainer().appendChild(canvas);
        canvas.style.display = 'none';
        ctx = canvas.getContext('2d');

        // 2、添加canvasSource和layer
        map.addSource('canvas-source', {
            type: 'canvas',
            canvas: 'mapCanvas',
            coordinates: getMapExtent(),
            animate: true
        });
        map.addLayer({
            id: 'canvas-layer',
            type: 'raster',
            source: 'canvas-source'
        });
        drawPoint(map.getCenter())
    }

    this.init = init

    function drawPoint(coord) {
        ctx.beginPath()
        const xy = map2screen(coord)
        ctx.arc(xy[0], xy[1], 0, Math.PI * 2, true)
        ctx.fillStyle = 'red'
        ctx.fill()
    }
}